<!-- 订单页面 -->
<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 搜索 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            class="goods-search-wrap"
            v-model="queryInfo.query"
            @keyup.enter.native="searchOrders"
            clearable
            @clear="clearSearch"
            placeholder="请输入内容"
          >
            <el-button slot="append" icon="el-icon-search" @click="searchOrders"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.timestamp"
        >{{activity.content}}</el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        query: '', // 搜索内容
        pageNum: 1,
        pageSize: 5
      },
      reverse: true,
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }]
    }
  },

  created() {},

  methods: {
    // 清除搜索输入框
    clearSearch() {},

    // 搜索订单
    searchOrders() {}
  }
}
</script>
<style lang='less' scoped>
.el-timeline {
  margin-top: 20px;
}
</style>